<template>
	<view class="shiciBox" >
		<img class="yulu_image"  src="http://api.btstu.cn/sjbz/?lx=meizi">
		<template v-for="(item,index) in xiaoshuoList" >
			<XiaoshuoItem :itemConetnt="item.content" :key="index" ></XiaoshuoItem>
		</template>
		<image :class="['gotop',istop? '' :'totop_ani',isShow?'':'unactive']" src="../../static/icons/gotop.png" mode="" @click="backtop" ></image>
		<button @click="btnClick" class="addBtn">增加</button>
		<uni-popup ref="xiaoshuoPop" type="left" background-color="#fff" >
			<view class="addContent">
				<form >
					<button type="primary" class="photoBtn" @click="gotoPhoto">拍照或者图片提取文字</button>
					<view class="uni-form-item">
						<view class="title">输入文本:</view>
						<textarea class="textarea" v-model="insertText" maxlength="-1"/>
					</view>
					<view class="uni-btn-v">
						<button type="default" @click="submit" class="submitBtn">提交</button>
						<button type="default" @click="reset" class="cancelBtn">清空</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import XiaoshuoItem from "@/component/XiaoshuoItem.vue"
	import {get, showModel,showSuccess,post} from '@/config/request.js'
	export default{
		data(){
			return {
				xiaoshuoList:[],
				istop:true,
				isShow:false,
				page:1,
				pageSize:10,
				insertText:''
			}
		},
		components:{
			XiaoshuoItem
		},
		created(){
			console.log("diyige")
			this.getShici()
		},
		onLoad() {
			this.insertText=''
		},
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 400) { //当距离大于400时显示回到顶部按钮
				this.isShow = true
			} else { //当距离小于400时隐藏回到顶部按钮
				this.isShow = false
			}
		},
		
		//屏幕到底部时候触发此事件(和methods同级)可搭配成上拉刷新
		onReachBottom() {
			console.log('reach');
			this.getShici()
		},
		methods:{
			// 获取小说笔记列表
			async getShici () {
				let obj={
					page:this.page,
					pageSize:this.pageSize
				}
				try {
					const res = await post('xiaoshuoList',obj)
					console.log('后端返回', res)
					if(res.length==0){
						uni.showToast({title:'没有更多数据了',icon:"none"});
						return
					}
					this.xiaoshuoList=this.xiaoshuoList.concat(res)  //拼接数组
					this.page++
				} catch (err) {
					console.log('从后端返回执行的错误信息是：', err)
					showModel('获取失败', '服务器出了一点问题，请稍后再试~')
				}
			},
			// 点击返回顶部按钮 跳回顶部
			backtop() {
				const that=this
				that.istop=false
				setTimeout(()=>{
					that.istop=true
				},1000)
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
			btnClick(){
				this.$refs.xiaoshuoPop.open('left')
			},
			async submit(){
				console.log("我的",this.insertText)
				if(this.insertText==''){
					showModel('温馨提示', '你不输入，还想新增，臭不要脸')
					return
				}
				let params={
					insertText:this.insertText
				}
				try {
					const res = await post('xiaoshuoAdd',params)
					if(res.code===10000){
						this.xiaoshuoList=res.data
						showSuccess("添加成功")
						this.$refs.xiaoshuoPop.close()
					}
				} catch (err) {
					console.log('从后端返回执行的错误信息是：', err)
					showModel('获取失败', '服务器出了一点问题，请稍后再试~')
				}
			},
			reset(){
				this.insertText=''
			},
			//去往图片识别文字
			gotoPhoto(){
				let	url='https://www.iamwawa.cn/ocr.html'
				uni.navigateTo({
					url: '/pages/webpage/index?redirectUrl='+url,
					success: res => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				})
			}
		}
		
	}
</script>

<style lang="less" scoped>
	.shiciBox{
		height: 100%;
		overflow-y: scroll;
		position: relative;
		background-color: #e8e8e8;
		.yulu_image{
			width: 100%;
		}
		.gotop{
			position: fixed;
			width: 150rpx;
			height: 150rpx;
			bottom: 100rpx;
			right: 50rpx;
			transition: 2s;
		}
		.unactive{
			opacity: 0;
			transform: translateX(100px);
		}
		.addBtn{
			width: 120rpx;
			height: 60rpx;
			background-color: #5ebef9;
			border-radius: 30rpx 0 0 30rpx;
			position: fixed;
			top: 100rpx;
			right: 0rpx;
			font-size: 25rpx;
			line-height: 60rpx;
		}
		.addContent{
			padding: 15rpx;
			border-radius: 20rpx;
			.photoBtn{
				background: #5ebef9;
			}
			.uni-form-item{
				.title{
					font-weight: 700;
				}
				.textarea{
					border: 1px solid rgba(0,0,0,0.5);
					width: 100%;
					font-size: 25rpx;
					line-height: 30rpx;
					padding: 10rpx;
				}
			}
		}
		.uni-btn-v{
			display: flex;
			justify-content: space-between;
			margin-top: 15rpx;
			.submitBtn{
				background: #5ebef9;
			}
		}
	}
	
	.totop_ani{
		animation: animation_img 1s;
		animation-iteration-count: infinite;
	}
	 
	@keyframes animation_img {
	  from, 0%, to {
	    transform: none;
	  }
	  50% {
	     transform: scale(1.5);
	  }
	  100% {
	   transform: scale(1);
	  }
	}
</style>
